<template>
  <div class="admin-settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>系统设置</h2>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本设置" name="basic">
          <el-form 
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="140px"
            label-position="right"
            class="settings-form"
          >
            <el-form-item label="网站名称" prop="siteName">
              <el-input v-model="basicForm.siteName" />
            </el-form-item>
            
            <el-form-item label="网站描述" prop="siteDescription">
              <el-input 
                v-model="basicForm.siteDescription" 
                type="textarea" 
                :rows="3" 
                placeholder="简要描述网站的主要内容和目标"
              />
            </el-form-item>
            
            <el-form-item label="网站LOGO">
              <el-upload
                class="logo-uploader"
                action="#"
                :http-request="handleLogoUpload"
                :show-file-list="false"
                :before-upload="beforeLogoUpload"
              >
                <img v-if="basicForm.logoUrl" :src="basicForm.logoUrl" class="logo-image" />
                <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <div class="upload-tip">建议尺寸: 200px × 60px，PNG或SVG格式</div>
            </el-form-item>
            
            <el-form-item label="网站图标" prop="faviconUrl">
              <el-upload
                class="favicon-uploader"
                action="#"
                :http-request="handleFaviconUpload"
                :show-file-list="false"
                :before-upload="beforeFaviconUpload"
              >
                <img v-if="basicForm.faviconUrl" :src="basicForm.faviconUrl" class="favicon-image" />
                <el-icon v-else class="favicon-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <div class="upload-tip">建议尺寸: 32px × 32px，ico、PNG或SVG格式</div>
            </el-form-item>
            
            <el-form-item label="页脚信息" prop="footerText">
              <el-input 
                v-model="basicForm.footerText" 
                type="textarea" 
                :rows="3" 
                placeholder="版权信息、备案号等"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
              <el-button @click="resetBasicForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="内容设置" name="content">
          <el-form 
            ref="contentFormRef"
            :model="contentForm"
            label-width="200px"
            label-position="right"
            class="settings-form"
          >
            <el-form-item label="文章分类">
              <div class="categories-container">
                <div 
                  v-for="(category, index) in contentForm.categories" 
                  :key="index"
                  class="category-item"
                >
                  <el-input 
                    v-model="category.name" 
                    placeholder="分类名称"
                    class="category-input"
                  />
                  <el-button type="danger" @click="removeCategory(index)">删除</el-button>
                </div>
                <el-button type="primary" @click="addCategory">添加分类</el-button>
              </div>
            </el-form-item>
            
            <el-divider />
            
            <el-form-item label="默认排序方式">
              <el-select v-model="contentForm.defaultSort">
                <el-option label="最新发布" value="newest" />
                <el-option label="最多浏览" value="mostViewed" />
                <el-option label="最多评论" value="mostCommented" />
                <el-option label="最多点赞" value="mostLiked" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="文章列表每页显示数量">
              <el-input-number 
                v-model="contentForm.articlesPerPage" 
                :min="5" 
                :max="50"
              />
            </el-form-item>
            
            <el-form-item label="评论列表每页显示数量">
              <el-input-number 
                v-model="contentForm.commentsPerPage" 
                :min="5" 
                :max="50"
              />
            </el-form-item>
            
            <el-form-item label="首页推荐文章数量">
              <el-input-number 
                v-model="contentForm.featuredArticlesCount" 
                :min="0" 
                :max="10"
              />
            </el-form-item>
            
            <el-form-item label="允许匿名评论">
              <el-switch v-model="contentForm.allowAnonymousComments" />
            </el-form-item>
            
            <el-form-item label="评论需要审核">
              <el-switch v-model="contentForm.requireCommentApproval" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveContentSettings">保存设置</el-button>
              <el-button @click="resetContentForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="邮件设置" name="email">
          <el-form 
            ref="emailFormRef"
            :model="emailForm"
            :rules="emailRules"
            label-width="140px"
            label-position="right"
            class="settings-form"
          >
            <el-form-item label="SMTP服务器" prop="smtpServer">
              <el-input v-model="emailForm.smtpServer" placeholder="例如: smtp.example.com" />
            </el-form-item>
            
            <el-form-item label="SMTP端口" prop="smtpPort">
              <el-input-number v-model="emailForm.smtpPort" :min="1" :max="65535" />
            </el-form-item>
            
            <el-form-item label="使用SSL/TLS">
              <el-switch v-model="emailForm.useTLS" />
            </el-form-item>
            
            <el-form-item label="发件人邮箱" prop="senderEmail">
              <el-input v-model="emailForm.senderEmail" placeholder="例如: noreply@example.com" />
            </el-form-item>
            
            <el-form-item label="发件人名称" prop="senderName">
              <el-input v-model="emailForm.senderName" placeholder="例如: 论坛管理员" />
            </el-form-item>
            
            <el-form-item label="邮箱账号" prop="username">
              <el-input v-model="emailForm.username" />
            </el-form-item>
            
            <el-form-item label="邮箱密码" prop="password">
              <el-input v-model="emailForm.password" type="password" show-password />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveEmailSettings">保存设置</el-button>
              <el-button @click="resetEmailForm">重置</el-button>
              <el-button type="success" @click="testEmailSettings">测试邮件发送</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="第三方集成" name="integration">
          <el-form 
            ref="integrationFormRef"
            :model="integrationForm"
            label-width="200px"
            label-position="right"
            class="settings-form"
          >
            <h3>OAuth登录</h3>
            
            <el-form-item label="启用GitHub登录">
              <el-switch v-model="integrationForm.enableGithub" />
            </el-form-item>
            
            <template v-if="integrationForm.enableGithub">
              <el-form-item label="GitHub Client ID">
                <el-input v-model="integrationForm.githubClientId" />
              </el-form-item>
              
              <el-form-item label="GitHub Client Secret">
                <el-input v-model="integrationForm.githubClientSecret" type="password" show-password />
              </el-form-item>
            </template>
            
            <el-divider />
            
            <el-form-item label="启用Google登录">
              <el-switch v-model="integrationForm.enableGoogle" />
            </el-form-item>
            
            <template v-if="integrationForm.enableGoogle">
              <el-form-item label="Google Client ID">
                <el-input v-model="integrationForm.googleClientId" />
              </el-form-item>
              
              <el-form-item label="Google Client Secret">
                <el-input v-model="integrationForm.googleClientSecret" type="password" show-password />
              </el-form-item>
            </template>
            
            <el-divider />
            
            <h3>其他集成</h3>
            
            <el-form-item label="Google Analytics ID">
              <el-input v-model="integrationForm.googleAnalyticsId" placeholder="例如: UA-XXXXXXXXX-X" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveIntegrationSettings">保存设置</el-button>
              <el-button @click="resetIntegrationForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import api from '@/api/index'

export default {
  name: 'AdminSettings',
  
  components: {
    Plus
  },
  
  setup() {
    // 当前激活的标签页
    const activeTab = ref('basic')
    
    // 表单引用
    const basicFormRef = ref(null)
    const contentFormRef = ref(null)
    const emailFormRef = ref(null)
    const integrationFormRef = ref(null)
    
    // 表单数据
    const form = reactive({
      website: {
        siteName: '',
        siteDescription: '',
        siteLogo: '',
        siteFavicon: '',
        contactEmail: '',
        icp: '',
        allowRegistration: true
      },
      content: {
        defaultPageSize: 10,
        allowAnonymousComment: false,
        commentAudit: false,
        postAudit: false,
        badWords: '',
        maxUploadSize: 5
      },
      mail: {
        smtpServer: '',
        smtpPort: 465,
        smtpUsername: '',
        smtpPassword: '',
        smtpFrom: '',
        enableSSL: true
      },
      third: {
        enableCaptcha: false,
        recaptchaSiteKey: '',
        recaptchaSecretKey: '',
        enableGoogleAnalytics: false,
        googleAnalyticsId: ''
      }
    })
    
    // 表单验证规则
    const basicRules = {
      siteName: [
        { required: true, message: '请输入网站名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度应在2到50个字符之间', trigger: 'blur' }
      ],
      siteDescription: [
        { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
      ],
      footerText: [
        { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
      ]
    }
    
    const emailRules = {
      smtpServer: [
        { required: true, message: '请输入SMTP服务器地址', trigger: 'blur' }
      ],
      smtpPort: [
        { required: true, message: '请输入SMTP端口', trigger: 'blur' },
        { type: 'number', message: '端口必须是数字', trigger: 'blur' }
      ],
      senderEmail: [
        { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
      ],
      senderName: [
        { required: true, message: '请输入发件人名称', trigger: 'blur' }
      ],
      username: [
        { required: true, message: '请输入邮箱账号', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入邮箱密码', trigger: 'blur' }
      ]
    }
    
    // 加载所有设置
    const loadAllSettings = async () => {
      const loading = ElLoading.service({
        lock: true,
        text: '加载配置中...',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      
      try {
        // 调用API获取所有设置
        const response = await api.admin.getAllSettings()
        
        if (response.data && response.code === 0) {
          const settings = response.data
          
          // 加载基本设置
          if (settings.basic) {
            form.website.siteName = settings.basic['site.name'] || 'IT技术论坛'
            form.website.siteDescription = settings.basic['site.description'] || ''
            form.website.siteLogo = settings.basic['site.logo'] || ''
            form.website.siteFavicon = settings.basic['site.favicon'] || ''
            form.website.footerText = settings.basic['site.footer'] || ''
          }
          
          // 加载内容设置
          if (settings.content) {
            form.content.defaultPageSize = parseInt(settings.content['content.defaultPageSize'] || 10)
            form.content.allowAnonymousComment = settings.content['content.allowAnonymousComment'] === 'true'
            form.content.commentAudit = settings.content['content.commentAudit'] === 'true'
            form.content.postAudit = settings.content['content.postAudit'] === 'true'
            form.content.badWords = settings.content['content.badWords'] || ''
            form.content.maxUploadSize = parseInt(settings.content['content.maxUploadSize'] || 5)
            
            // 加载分类
            if (settings.content['content.categories']) {
              try {
                const categoriesJson = settings.content['content.categories']
                form.content.categories = JSON.parse(categoriesJson)
              } catch (e) {
                form.content.categories = []
                console.error('解析分类数据出错', e)
              }
            }
            
            // 确保至少有一个分类
            if (!form.content.categories || !form.content.categories.length) {
              form.content.categories = [{ name: '默认分类' }]
            }
          }
          
          // 加载邮件设置
          if (settings.email) {
            form.mail.smtpServer = settings.email['email.smtpServer'] || ''
            form.mail.smtpPort = parseInt(settings.email['email.smtpPort'] || 25)
            form.mail.smtpUsername = settings.email['email.smtpUsername'] || ''
            form.mail.smtpPassword = settings.email['email.smtpPassword'] || ''
            form.mail.smtpFrom = settings.email['email.smtpFrom'] || ''
            form.mail.enableSSL = settings.email['email.enableSSL'] === 'true'
          }
          
          // 加载第三方集成设置
          if (settings.third) {
            form.third.enableCaptcha = settings.third['third.enableCaptcha'] === 'true'
            form.third.recaptchaSiteKey = settings.third['third.recaptchaSiteKey'] || ''
            form.third.recaptchaSecretKey = settings.third['third.recaptchaSecretKey'] || ''
            form.third.enableGoogleAnalytics = settings.third['third.enableGoogleAnalytics'] === 'true'
            form.third.googleAnalyticsId = settings.third['third.googleAnalyticsId'] || ''
          }
          
          ElMessage.success('配置加载成功')
        } else {
          ElMessage.error(response.message || '获取配置失败')
        }
      } catch (error) {
        console.error('加载配置出错', error)
        ElMessage.error('加载配置出错: ' + (error.message || '未知错误'))
      } finally {
        loading.close()
      }
    }
    
    // 保存基本设置
    const saveBasicSettings = async () => {
      // 表单验证
      await basicFormRef.value.validate()
      
      const loading = ElLoading.service({
        lock: true,
        text: '保存配置中...',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      
      try {
        // 构造保存的设置对象
        const settings = {
          'site.name': form.website.siteName,
          'site.description': form.website.siteDescription,
          'site.logo': form.website.siteLogo,
          'site.favicon': form.website.siteFavicon,
          'site.footer': form.website.footerText
        }
        
        // 调用API保存设置
        const response = await api.admin.saveBasicSettings(settings)
        
        if (response.code === 0) {
          ElMessage.success('基本设置保存成功')
        } else {
          ElMessage.error(response.message || '保存基本设置失败')
        }
      } catch (error) {
        console.error('保存基本设置出错', error)
        ElMessage.error('保存基本设置出错: ' + (error.message || '未知错误'))
      } finally {
        loading.close()
      }
    }
    
    // 重置基本设置表单
    const resetBasicForm = () => {
      basicFormRef.value.resetFields()
    }
    
    // 添加分类
    const addCategory = () => {
      form.content.categories.push({ name: '' })
    }
    
    // 删除分类
    const removeCategory = (index) => {
      form.content.categories.splice(index, 1)
      
      // 确保至少有一个分类
      if (!form.content.categories.length) {
        form.content.categories.push({ name: '默认分类' })
      }
    }
    
    // 保存内容设置
    const saveContentSettings = async () => {
      // 验证分类名称不能为空
      const hasEmptyCategory = form.content.categories.some(cat => !cat.name.trim())
      if (hasEmptyCategory) {
        ElMessage.warning('分类名称不能为空')
        return
      }
      
      const loading = ElLoading.service({
        lock: true,
        text: '保存配置中...',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      
      try {
        // 将分类数组转换为JSON字符串
        const categoriesJson = JSON.stringify(form.content.categories)
        
        // 构造保存的设置对象
        const settings = {
          'content.categories': categoriesJson,
          'content.defaultPageSize': form.content.defaultPageSize.toString(),
          'content.allowAnonymousComment': form.content.allowAnonymousComment.toString(),
          'content.commentAudit': form.content.commentAudit.toString(),
          'content.postAudit': form.content.postAudit.toString(),
          'content.badWords': form.content.badWords,
          'content.maxUploadSize': form.content.maxUploadSize.toString(),
          'content.featuredArticlesCount': form.content.featuredArticlesCount.toString(),
          'content.requireCommentApproval': form.content.requireCommentApproval.toString()
        }
        
        // 调用API保存设置
        const response = await api.admin.saveContentSettings(settings)
        
        if (response.code === 0) {
          ElMessage.success('内容设置保存成功')
        } else {
          ElMessage.error(response.message || '保存内容设置失败')
        }
      } catch (error) {
        console.error('保存内容设置出错', error)
        ElMessage.error('保存内容设置出错: ' + (error.message || '未知错误'))
      } finally {
        loading.close()
      }
    }
    
    // 重置内容设置表单
    const resetContentForm = () => {
      // 重新加载设置
      loadAllSettings()
    }
    
    // 保存邮件设置
    const saveEmailSettings = async () => {
      // 表单验证
      await emailFormRef.value.validate()
      
      const loading = ElLoading.service({
        lock: true,
        text: '保存邮件配置中...',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      
      try {
        // 构造保存的设置对象
        const settings = {
          'email.smtpServer': form.mail.smtpServer,
          'email.smtpPort': form.mail.smtpPort.toString(),
          'email.useTLS': form.mail.enableSSL.toString(),
          'email.smtpUsername': form.mail.smtpUsername,
          'email.smtpPassword': form.mail.smtpPassword,
          'email.smtpFrom': form.mail.smtpFrom,
          'email.senderEmail': form.mail.senderEmail,
          'email.senderName': form.mail.senderName,
          'email.username': form.mail.username
        }
        
        // 只有当密码字段有内容时才更新密码
        if (form.mail.smtpPassword) {
          settings['email.smtpPassword'] = form.mail.smtpPassword
        }
        
        // 调用API保存设置
        const response = await api.admin.saveEmailSettings(settings)
        
        if (response.code === 0) {
          ElMessage.success('邮件设置保存成功')
        } else {
          ElMessage.error(response.message || '保存邮件设置失败')
        }
      } catch (error) {
        console.error('保存邮件设置出错', error)
        ElMessage.error('保存邮件设置出错: ' + (error.message || '未知错误'))
      } finally {
        loading.close()
      }
    }
    
    // 重置邮件设置表单
    const resetEmailForm = () => {
      emailFormRef.value.resetFields()
    }
    
    // 测试邮件发送
    const testEmailSettings = async () => {
      try {
        // 要求用户输入测试邮箱
        await ElMessageBox.prompt('请输入测试邮箱地址', '测试邮件发送', {
          confirmButtonText: '发送',
          cancelButtonText: '取消',
          inputPattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/,
          inputErrorMessage: '请输入有效的邮箱地址'
        }).then(async ({ value }) => {
          const loading = ElLoading.service({
            lock: true,
            text: '发送测试邮件中...',
            background: 'rgba(255, 255, 255, 0.7)'
          })
          
          try {
            // 调用API发送测试邮件
            const response = await api.admin.testEmailSending(value)
            
            if (response.code === 0) {
              ElMessage.success(response.message || '测试邮件已发送')
            } else {
              ElMessage.error(response.message || '发送测试邮件失败')
            }
          } finally {
            loading.close()
          }
        })
      } catch (e) {
        // 用户取消操作，不做处理
        if (e !== 'cancel') {
          console.error('测试邮件发送出错', e)
          ElMessage.error('发送测试邮件出错: ' + (e.message || '未知错误'))
        }
      }
    }
    
    // 保存第三方集成设置
    const saveIntegrationSettings = async () => {
      const loading = ElLoading.service({
        lock: true,
        text: '保存配置中...',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      
      try {
        // 构造保存的设置对象
        const settings = {
          'third.enableCaptcha': form.third.enableCaptcha.toString(),
          'third.recaptchaSiteKey': form.third.recaptchaSiteKey,
          'third.recaptchaSecretKey': form.third.recaptchaSecretKey,
          'third.enableGoogleAnalytics': form.third.enableGoogleAnalytics.toString(),
          'third.googleAnalyticsId': form.third.googleAnalyticsId
        }
        
        // 调用API保存设置
        const response = await api.admin.saveIntegrationSettings(settings)
        
        if (response.code === 0) {
          ElMessage.success('第三方集成设置保存成功')
        } else {
          ElMessage.error(response.message || '保存第三方集成设置失败')
        }
      } catch (error) {
        console.error('保存第三方集成设置出错', error)
        ElMessage.error('保存第三方集成设置出错: ' + (error.message || '未知错误'))
      } finally {
        loading.close()
      }
    }
    
    // 重置第三方集成设置表单
    const resetIntegrationForm = () => {
      // 重新加载设置
      loadAllSettings()
    }
    
    // 处理Logo上传
    const handleLogoUpload = async (option) => {
      const file = option.file
      
      // 这里只是示例，实际上传逻辑会更复杂，可能需要调用后端API
      // 这里简单使用FileReader读取文件作为base64
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        form.website.siteLogo = reader.result
        ElMessage.success('Logo上传成功')
      }
      reader.onerror = (error) => {
        ElMessage.error('Logo上传失败: ' + error)
      }
    }
    
    // Logo上传前验证
    const beforeLogoUpload = (file) => {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isSVG = file.type === 'image/svg+xml'
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isJPG && !isPNG && !isSVG) {
        ElMessage.error('Logo只能是JPG/PNG/SVG格式!')
        return false
      }
      
      if (!isLt2M) {
        ElMessage.error('Logo大小不能超过2MB!')
        return false
      }
      
      return true
    }
    
    // 处理Favicon上传
    const handleFaviconUpload = async (option) => {
      const file = option.file
      
      // 这里只是示例，实际上传逻辑会更复杂，可能需要调用后端API
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        form.website.siteFavicon = reader.result
        ElMessage.success('网站图标上传成功')
      }
      reader.onerror = (error) => {
        ElMessage.error('网站图标上传失败: ' + error)
      }
    }
    
    // Favicon上传前验证
    const beforeFaviconUpload = (file) => {
      const isICO = file.type === 'image/x-icon' || file.name.endsWith('.ico')
      const isPNG = file.type === 'image/png'
      const isSVG = file.type === 'image/svg+xml'
      const isLt1M = file.size / 1024 / 1024 < 1
      
      if (!isICO && !isPNG && !isSVG) {
        ElMessage.error('网站图标只能是ICO/PNG/SVG格式!')
        return false
      }
      
      if (!isLt1M) {
        ElMessage.error('网站图标大小不能超过1MB!')
        return false
      }
      
      return true
    }
    
    onMounted(() => {
      // 加载所有设置
      loadAllSettings()
    })
    
    return {
      activeTab,
      basicFormRef,
      contentFormRef,
      emailFormRef,
      integrationFormRef,
      basicForm: form.website,
      contentForm: form.content,
      emailForm: form.mail,
      integrationForm: form.third,
      basicRules,
      emailRules,
      beforeLogoUpload,
      handleLogoUpload,
      beforeFaviconUpload,
      handleFaviconUpload,
      saveBasicSettings,
      saveContentSettings,
      saveEmailSettings,
      saveIntegrationSettings,
      testEmailSettings,
      resetBasicForm,
      resetContentForm,
      resetEmailForm,
      resetIntegrationForm,
      addCategory,
      removeCategory
    }
  }
}
</script>

<style scoped>
.admin-settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
}

.settings-form {
  max-width: 800px;
  margin: 20px auto;
}

.logo-uploader,
.favicon-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.logo-uploader:hover,
.favicon-uploader:hover {
  border-color: #409EFF;
}

.logo-uploader-icon,
.favicon-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.favicon-uploader-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.logo-image {
  max-width: 200px;
  max-height: 60px;
  display: block;
}

.favicon-image {
  width: 32px;
  height: 32px;
  display: block;
}

.upload-tip {
  font-size: 12px;
  color: #606266;
  margin-top: 5px;
}

.categories-container {
  max-width: 500px;
}

.category-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.category-input {
  margin-right: 10px;
  width: 300px;
}

h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.el-divider {
  margin: 24px 0;
}
</style> 